<div class="ngm-table__container flex-1 h-full flex flex-col overflow-auto">
  <table mat-table class="ngm-table-grid min-w-full"
    [dataSource]="dataSource" matSort
    [displayDensity]="displayDensity()"
    >
    <ng-container matColumnDef="levelNumber" sticky>
      <th mat-header-cell *matHeaderCellDef mat-sort-header>
        <span>{{ 'PAC.KEY_WORDS.LevelNumber' | translate: {Default: 'Level Number'} }}</span>
      </th>

      <td mat-cell *matCellDef="let data" >
        <span [ngStyle]="{marginLeft: data.levelNumber + 'rem' }">{{data.levelNumber}}</span>
      </td>
    </ng-container>

    <!-- Columns -->
    <ng-container *ngFor="let column of columns(); let last = last" [matColumnDef]="column.name" [sticky]="column.sticky" [stickyEnd]="column.stickyEnd">
      <th mat-header-cell *matHeaderCellDef mat-sort-header [width]="column.width">
        <div class="ngm-header-cell flex-1 flex justify-between items-center whitespace-nowrap">
          <span>
          {{column.caption || column.name}}
          </span>
        </div>
      </th>
      <td mat-cell *matCellDef="let data" >
        <div class="flex items-center">
          @if (data.level === column.name) {
            @if (!last) {
                <button mat-icon-button class="inline-block" (click)="toggleNode(data)">
                    @if (data.expanded) {
                      <mat-icon>expand_less</mat-icon>
                    } @else {
                      <mat-icon>expand_more</mat-icon>
                    }
                </button>
            }
            
            <ngm-display-behaviour class="flex-1" [option]="{
                key: getValue(data.value, column.name),
                caption: getValue(data.value, column.captionName)
              }"
              [displayBehaviour]="displayBehaviour()"/>
          }
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="childrenCardinality" stickyEnd>
      <th mat-header-cell *matHeaderCellDef mat-sort-header>
        <span>{{ 'PAC.KEY_WORDS.ChildrenCardinality' | translate: {Default: 'Children Cardinality'} }}</span>
      </th>

      <td mat-cell *matCellDef="let data" >
        <span>{{data.children.length}}</span>
      </td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="displayedColumns(); sticky:true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns();"></tr>
  </table>
</div>

@if (paging()) {
  <mat-paginator class="ngm-density__compact" [pageSizeOptions]="pageSizeOptions()" showFirstLastButtons></mat-paginator>
}